<template>
  <div class="forget">
    <div class="forgetBox">
      <h2>忘记密码</h2>
      <div class="newUsername">
        账号
        <input
          type="text"
          v-model="newusername"
          placeholder="请输入已有账号(不能为空)"
        />
      </div>
      <div class="errorTip" v-show="forgetNamError">
        该用户不存在！请输入已注册账号
      </div>
      <div class="newPassword">
        新密码
        <input
          type="password"
          v-model="newpassword"
          placeholder="输入新密码(最多不超过10位)"
        />
      </div>
      <div class="errorTip" v-show="forgetPasError">密码输入有误</div>
      <div class="renewPassword">
        确认密码
        <input
          type="password"
          v-model="renewpassword"
          placeholder="确认新密码(最多不超过10位)"
        />
      </div>
      <div class="errorTip" v-show="forgetPasError">密码输入有误</div>
      <div class="loginTip">
        取消修改，前往<a @click="router.back()">登录</a>
      </div>
      <button class="forgetBtn" @click="newForgetFn">修改密码</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUpdateUserHttp, getUsersHttp } from '@/api/request/index.js'

/* 获取路由实例 */
const route = useRoute()
const router = useRouter()
/* 确认 新的用户名 和 密码 */
const newusername = ref('')
const newpassword = ref('')
const renewpassword = ref('')
/* 注册的 用户类型 */
const forgetType = route.query.type
console.log('注册的用户类型', forgetType) // 打印 注册的用户类型
/* 定义 已注册的某用户类型 的所有用户信息 */
const selectedUserData = ref([])
/* 定义 注册错误提示 */
const forgetNamError = ref(false)
const forgetPasError = ref(false)

/* 注册 不同用户类型 */
const newForgetFn = async () => {
  // 校验账号是否存在
  if (
    !selectedUserData.value.some(
      (item) => item.username === newusername.value
    ) &&
    newpassword.value !== '' &&
    renewpassword.value !== ''
  ) {
    forgetNamError.value = true
    forgetPasError.value = false
    return
  } else if (
    newusername.value.trim() === '' ||
    newpassword.value === '' ||
    newpassword.value.length > 10 ||
    newpassword.value !== renewpassword.value
  ) {
    forgetNamError.value = false
    forgetPasError.value = true
    return
  } else {
    // 筛选出来含有用户名的用户信息
    const forgetUser = selectedUserData.value.find(
      (item) => item.username === newusername.value
    )
    // 请求更新接口
    const res = await getUpdateUserHttp({
      id: forgetUser.id,
      username: newusername.value.trim(),
      password: newpassword.value,
      type: forgetType,
      isOnline: forgetUser.isOnline,
    })
    console.log(res) // 打印 更新接口返回结果
    forgetNamError.value = false
    forgetPasError.value = false
    alert('密码修改成功，返回登录页面')
    // 修改成功，跳转登录页面
    router.back()
  }
}

onMounted(async () => {
  const res = await getUsersHttp({
    type: forgetType,
  })
  selectedUserData.value = res.data.result
  console.log(selectedUserData.value) // 打印 已经注册的某用户类型的所有用户信息
})
</script>

<style scoped>
.forget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('@/images/forget.jpg');
  background-size: cover;
}
.forgetBox {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  width: 380px;
  /* height: 300px; */
  background-color: #fff;
  padding: 0 45px;
  border-radius: 10px;
  box-shadow: 0 0 10px #999;
}
.forget .forgetBox h2 {
  font-size: 20px;
  color: #1061a4;
  text-align: center;
  padding: 5px 10px;
  margin: 20px 0;
}
.newUsername,
.newPassword,
.renewPassword {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 14px;
  margin-top: 10px;
}
.errorTip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  color: red;
  padding-left: 23%;
}
.newUsername input,
.newPassword input,
.renewPassword input {
  width: 77%;
  height: 30px;
  margin-left: 10px;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid #ccc;
  outline: none;
}
.loginTip {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-radius: 5px;
  margin: 20px 0 10px 0;
  border: none;
}
.loginTip a {
  color: #1061a4;
  text-decoration: none;
}
.loginTip a:hover {
  color: #2594ff;
  cursor: pointer;
}
.forgetBtn {
  width: 100%;
  height: 40px;
  background-color: #0a3767;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 30px;
  border: none;
  cursor: pointer;
}
.forgetBtn:hover {
  background-color: #1061a4;
}
</style>
